<template>
    <div id="homeheader">
        <div style="display: flex;">
            <div class="logo">
                <!-- <img src="../../imgs/1.jpeg" alt="" srcset=""> -->
            </div>
            <div class="title">
                <p>东软云医院HIS系统</p>
            </div>
        </div>
        <!-- hhh:{{ xxx }} -->
        <div style="display: flex; align-items: center">
            <el-dropdown style="">
                <el-avatar :src="xxx"/>
                <el-button>
                    DDDD
                    <el-icon class="el-icon--right">
                        <arrow-down/>
                    </el-icon>
                </el-button>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item @click="op1">选项一</el-dropdown-item>
                        <el-dropdown-item @click="op1">选项二</el-dropdown-item>
                        <el-dropdown-item @click="op1">选项三</el-dropdown-item>
                        <el-dropdown-item @click="op1">选项四</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
           <el-button @click="dropdown" :icon="SwitchButton" style="margin: 10px;">退出</el-button>
        </div>
    </div>
</template>

<script setup>
import {SwitchButton}from '@element-plus/icons-vue'
import xxx from '../../imgs/xxx.jpeg'
import { useRouter } from "vue-router";
const router = useRouter();

const dropdown=()=>{
    sessionStorage.clear();
    router.push("/");
}


</script>

<style lang="scss" scoped>
#homeheader {

    display: flex; //组件水平布局
    justify-content: space-between;
    background-color:#333744 ;
    .logo {
        img {
            height: 66px;
        }
    }

    .title {
        p {
            line-height: 68px;
            font-family: '微软雅黑', Courier, monospace;
            font-size: 1.875rem;
            color: rgb(174, 191, 239);
        }
    }
}
</style>